
CHAPTER 1 

Dreamweaver Tutorial 



This tutorial shows you how to use Dreamweaver to define a local site and to 
create and edit Web documents. Use this tutorial to learn the basic skills you’ll 
need to develop a Web site and to learn about some of the new features of 
Dreamweaver 3. 

In this tutorial, you will create a Web site for a fictitious company, Scaal Coffee, a 
gourmet coffee business. 

While visiting Scaal’s Web site, customers can read about the company, view the 
weekly specials, and browse through the product pages of Scaal’s online catalog. 
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Along the way, you’ll learn how to perform the following tasks: 

• Define a local site 

• Create a document 

• Use layers to lay out a page 

• Convert layers to tables 

• Attach a behavior to an image 

• Import a Microsoft Word HTML document 

• Format text using HTML styles 

• Create a site map 

• Create links 

• Apply a template 

• Create a jump menu 

Note: This tutorial demonstrates some features that are supported only in 4.0 or 
later browsers. 

Take a guided tour of Dreamweaver 

Before you get started, watch the Guided Tour movies in Dreamweaver Help to 
familiarize yourself with Dreamweaver’s features. 

1 In Dreamweaver, choose Help > Using Dreamweaver. 

2 In the Contents list in the left frame, click Getting Started, and then click 
Learning Dreamweaver. 

3 Click a movie title. 

4 Close the browser when you finish. 
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Preview the completed Web site 

Next, view the completed Web site to get an idea of what you’ll be 
working toward. 

1 Launch Dreamweaver. 

2 In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate 
to the Dreamweaver application folder, open the Tutorial folder, and then the 
Scaal_site folder. 

3 In the Scaal_site folder, select scaal_home.html, and then click Open to open 
the Scaal home page in the Document window. 

Do not edit this page. You will create your own version of this page. 

4 Choose File > Preview in Browser and select a browser with which to view the 
Scaal home page. (Use a 4.0 browser to view this site.) 



SCAAL 



Welcome to the Scaal 



our story 



Coffee Web site, home of the 
finest coffee gifts in the world. 



products 



this week 



Take a moment to view our many 
products We offer fine roasted 
products as well as items to wear 
and items for the office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 



Check with us often to see our 
special promotions of the week. 




5 Move the pointer over the three items on the left side of the page (Our Story, 
Products, and This Week), and notice that the items highlight to indicate that 
they are active links. 

Click the links to explore the site. To return to the home page, click the Scaal 
logo, which is located at the top of each site page. 

6 Close the browser when you finish looking at the site. 

7 Close Dreamweaver. 
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How the tutorial files are arranged 

Both the completed and partially completed HTML files used in this tutorial 
are in the Scaal_site folder in the Tutorial folder. Images and other associated 
files for the site are in folders below the Scaal_site folder. (The complete path to 
the Scaal_site folder will vary, depending on where you have Dreamweaver 3.0 
installed.) 

Each file has a meaningful name — for example, the HTML file for the completed 
Scaal products page is named products_index.html. The partially completed 
files — which you’ll be working on — have names similar to their counterparts in 
the complete site, except they begin with DW3_; the partially completed version 
of products_index.html, for example, is called DW3_products_index.html. 



Set up site structure for the tutorial 

Before you start the tutorial, create a new folder into which you’ll transfer the 
Scaal site tutorial files. Later, you can use the Sites folder structure to store other 
sites you create. 

1 At the root level of your local disk, create a new folder and name it Sites — for 
example, C:\Sites (Windows) or Hard DriveiSites (Macintosh). 

2 From the Dreamweaver/Tutorial folder, copy the complete Scaal_site folder 
into the Sites folder. 



24 Chapter 1 



Define a local site 

Begin your site development by defining a local site for the files in the Scaal_site. 
A site is a storage location for all the documents and files belonging to a particular 
Web site. Defining a local site delineates the structure of the site you are creating 
and tells Dreamweaver where you plan to store all of the site’s files. Define a local 
site for each Web site you create using Dreamweaver. 

For this tutorial, you’ll specify the Scaal_site folder as the local site folder. 

1 Launch Dreamweaver. 

A blank document opens. 

2 Choose Site > New Site. 

3 In the Site Definition dialog box, make sure Local Info is selected in the 
Category list. 

4 In the Site Name field, type my_tutoriaI. 

The site name lets you easily identify and select a site from a list of sites 
you’ve defined. 

5 Click the folder icon to the right of the Local Root Folder field, navigate to the 
Sites/Scaal_site folder, and click Open. Then click Select (Windows) or click 
Choose (Macintosh). 

The Local Root Folder field updates to display the path to the local site. 




Note: The complete path to the Scaal_site folder may vary, depending on where you 
have created your Sites folder. 

6 Click OK. 
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7 Click Create when asked if you’d like to create a cache file for the site. 

Caching the files in the Scaal_site folder creates a record of existing files 
so Dreamweaver can quickly update links when you move, rename, or 
delete a file. 

The Site window now displays a list of all the folders and files in the local site 
my_tutorial. The list also acts as a file manager, allowing you to copy, paste, 
delete, move, and open files just as you would in the file finder or explorer on 
your own computer. 




8 Leave the Site window open. 

9 Click the Document window to make it active. 
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Create the Scaal site home page 

Now that you have set up a structure to store the Scaal site, you’ll create a home 
page for the site. As you build this document, you’ll add a page title, layers, 
images, text, and links; your document will contain the same design components 
as the completed Scaal home page. 

If they aren’t already open, open the following workspace components: 

• The Object palette (choose Window > Objects), which you’ll use to add objects 
to your document 

• The Property inspector (choose Window > Properties), which you’ll use to set 
properties or attributes for objects in your document 

Save your document 

Save the blank document you created when you launched Dreamweaver. 

1 Choose File > Save. 

2 In the Save As dialog box, select the Sites/Scaal_site folder to save the file in. 

3 In the File Name field, type my_scaal_home.html. 

4 Click Save. 
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Define the title of the page 

Defining a page title for an HTML document helps users identify and keep track 
of a page they’re browsing. The page title appears in the browser title bar when a 
page is viewed in a browser. When a page is bookmarked, the page title appears in 
the bookmark list. If a document is created without a page title, the document 
appears in the browser with the title Untitled Document. 

1 With the Document window active, choose Modify > Page Properties to see the 
page property options. 

2 In the Title field of the Page Properties dialog box, type Scaal Gourmet Coffee. 




3 Click OK. 

The title appears in the title bar of the Dreamweaver Document window. 
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Create a page layout 

You’ll begin by opening the completed version of the Scaal home page in a 
browser so that you can refer to it while working. 

1 Choose File > Open, navigate to the Sites/Scaal_site folder, select 
scaal_home.html, and then click Open. 

2 Press FI 2, to preview the page in a browser. 

The home page appears in the browser. 



SCAAL 



Welcome to the Scaal 



our story 



Coffee Web site, home of the 
finest coffee gifts in the world. 



products 



this week 



Take a moment to view our many 
products . We offer fine roasted 
products as well as items to wear 
and items for the office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 



Check with us often to see our 
special promotions of the week. 




Leave the browser window open in the background to refer to as necessary. 

3 Click in the Document window of the scaal_home.html document, and then 
choose File > Close to close the document. 

Add layers 

Layers are ideal for creating complex page layouts, since you can easily reposition 
page elements that have been placed in layers by dragging them. You’ll lay out the 
home page using layers, and then convert the layout to a table layout so that the 
page will accurately display in both 3.0 and 4.0 browsers. 

You cannot convert layers to tables if the document being converted contains 
nested or overlapping layers. 

1 Choose Window > Layers to open the Layer palette. 

2 Make sure the Prevent Overlaps box is selected. 
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3 Click in the Document window of the my_scaal_home document to make the 
document active. 

4 Choose Insert > Layer. 

A layer is added to the document. 

5 In the Object palette’s Common panel, click the Draw Layer button. 
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6 Move the pointer to the Document window; the pointer changes into a 
drawing tool. In the space below the first layer, drag the pointer to draw 
a new layer. 

7 Repeat the actions in steps 5 and 6 to draw another layer. 

Your page should look similar to the screen below. 
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Select and manipulate a layer 

You can change the position or shape of the layers in your document. 
1 Click the border of the layer. 

Handles appear around a selected layer: 

m - 



2 To resize a layer, click a layer handle, and drag the handle to the desired size. 

3 To move a layer, do one of the following: 

• Use the arrow keys. 

• Hold down Shift and use the arrow keys to move a layer five pixels in the 
direction of the arrow used. 

• Click the tab in the top left corner of the layer and drag the layer to the 
desired position. 
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Add an image 

Now you’ll insert the Scaal logo image in the document. 

1 Click anywhere in the uppermost layer. Clicking in a layer places the insertion 
point inside the layer without selecting the layer. 

An active layer with an insertion point in it looks like this: 

p 



2 Choose Insert > Image. 

3 In the Select Image Source dialog box, locate the Sites/Scaal_site/Images folder, 
navigate to logo_scaal.gif, and click Select (Windows) or Choose (Macintosh). 

The image appears in the layer. 
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Add the navigation images 

Now you’ll add images for navigation buttons. 

After you add the button images, add space between the graphics: add a paragraph 
return after you insert the images. 

1 Place the insertion point in the navigation layer (the bottom left layer) . 

2 In the Object palette’s Common panel, click the Insert Image button. 

The Select Image Source dialog box appears. 
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3 In the Images folder of the Scaal_site, navigate to btn_ourstory_up.gif, and 
then click Select (Windows) or Choose (Macintosh) to insert the image. 

The Our Story image appears in the layer. 

4 Position the insertion point after the image in the layer, and press Enter 
(Windows) or Return (Macintosh) to add space between this image and the 
next image you insert. 




5 In the Object palette, click the Insert Image button, and in the dialog box that 
appears select btn_products_up.gif, and then click Select (Windows) or Choose 
(Macintosh) . 

6 Position the insertion point after the image in the layer, and press Enter 
(Windows) or Return (Macintosh). 

7 In the Object palette, click the Insert Image button, and in the dialog box that 
appears select btn_thisweek_up.gif, and then click Select (Windows) or Choose 
(Macintosh) . 

Your document layout should look similar to this. 
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Name the images 

Make a habit of naming the elements in your documents. Later, when you need to 
reference or select a particular image, layer, or some other document element, 
you’ll be able to easily identify it. You’ll be referencing these images later in the 
tutorial, so name them now. 

1 In the Document window, click the Our Story image to select it. 

2 In the Image field of the Property inspector, type ourstory. 




3 Repeat these steps, selecting and naming the other two images in your 
document. Name the second image products and the third image thisweek. 



Add text to a layer 

Now you’ll add text to the remaining layer. 

In Dreamweaver, you can type content directly into a layer, or you can cut and 
paste content from another document into a layer. In this tutorial, you’ll add text 
to the layer by copying and pasting content from an existing text file to a layer. 

1 Choose File > Open; then, in the Scaal_site folder, open DW3_copy.txt. 

The DW3_copy.txt document opens in a new Dreamweaver Document 
window. DW3_copy.txt is the file you’ll copy the text from. 

2 Choose Edit > Select All to select the document text. 

3 Choose Edit > Copy to copy the text. 

4 Close the DW3_copy.txt document. 

5 In the my_scaal_home document, position the insertion point in the bottom 
right layer. 

6 Choose Edit > Paste to paste the text into the layer. 
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Format text 



You can format text in the Document window by setting properties in the 
Property inspector. First, select the text you want to format, and then apply the 
changes. You’ll change the font and size of the text. 

Before you format the text, you’ll create a couple of paragraphs. Add a paragraph 
return after the first sentence and after the second sentence. 

1 If the Property inspector isn’t open, choose Window > Properties. 

2 With the insertion point anywhere in the layer, press Control+A (Windows) or 
Command+A (Macintosh) to select all the text in the layer. 

3 In the Property inspector’s second Format pop-up menu, which currently reads 
Default Font, select Arial, Helvetica, sans-serif 

4 In the Size pop-up menu, select 3. 

The text in your document automatically updates to reflect the changes. 

Add a background color to a layer 

You can also use the Property inspector to set the background color of a layer. 

You can select a color using the color picker, or you can type the hexadecimal code 
for a color. 

1 Click the border of the layer that contains the text to select it. (Handles appear 
around a layer when it is selected.) 

2 In the Property inspector, click the BgColor color box. 

The color palette and eyedropper icon appear. You can use the eyedropper to 
“pick up” any color in the visible work area, in addition to picking colors in the 
color palette. 

3 Move the color picker icon to the Scaal logo and click the gold that surrounds 
the letter S. 

The layer background color is updated. 
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IWcome to the Scaal Coffee fcfc site. Home of the finest 
Soffee gifts in the world. Take a moment to view our many 
foducts. 

Ml offer fine roasted products as well as items to wear, and 
terns for the office. Scaal has been serving fine coffee 
jonnoisiours like yourself for over 50 years. We follow a 
basting process that produces the finest coffees in the world. 

' Jheck back with us often to see our special promotions of the 
Mk. 
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this week 
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Position the layers 

Now that you’ve completed the design of your page — laying it out using layers — 
you’ll convert the layers to a table layout so the page can be viewed by users with 
3.0 browsers. 

When you convert layers to a table, Dreamweaver creates table columns, rows, 
and cells to fit the layers on a page. To reduce the number of table columns, rows, 
and cells you create as you convert the document layout, align layer elements 
before converting a document. Use the Property inspector to position layers in 
a document. 

First, you’ll resize and move the layers as you design your page; then you’ll set the 
position of the two lower layers so they align at the top. 

1 Resize the top layer by dragging the layer handles in until they just surround 
the Scaal logo and the text following it. 

2 Resize the navigation layer (the bottom left layer) by dragging the layer handles 
in until they just surround the images. 

3 Move the text layer so that it is positioned next to the navigation layer. Select 
the layer, and then use the arrow keys or drag the layer by the layer tab. (The 
layers won’t overlap, because Prevent Overlap is selected in the Layer palette.) 



SCAAL 



brave new world coFFee 



Icome to the Scaal Coffee web site. Home of the finest 
Soffee gifts in the world. Take a moment to view our many 
products. 



offer fine roasted products as well as items to wear, and 
terns for the office. Scaal has been serving fine coffee 
jonnoisseurs like yourself for over 50 years. We follow a 
basting process that produces the finest coffees in the world. 

Shock back with us often to see our special promotions of the 



4 If all the layer property fields aren’t visible in the Property inspector, click the 
expander arrow in the lower right corner of the Property inspector. 
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5 Select the layer that contains the navigation images. Hold down Shift and select 
the layer that contains the text. 

Both layers are selected. 

6 In the Property inspector’s T field, type lOOpx. This precisely positions both 
layers 1 00 pixels from the top of the document. 
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Click anywhere in the document to deselect the layers and to see the 
layers align. 
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Convert layers to a table 

Now that you’ve laid out the page, convert the layers to a table so that the page 
will be displayed accurately in 3.0 as well as later version browsers. 

1 Choose Modify > Layout Mode > Convert Layers to Table. 

The Convert Layers to Table dialog box appears. 




2 In the Convert Layers to Table dialog box, under Table Layout make sure that 
Smallest: Collapse Empty Cells and Use Transparent GIFs are selected. 

3 Under Layout Tools, make sure that Prevent Layer Overlaps is selected. 

4 Click OK. 

The layers are now converted to a table. 
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basting process that produces the finest coffees in the world. 
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Note: Dreamweaver sets the space between the table columns and rows using 
transparent GIFs. After converting layers to a table, you'll see the file tranparent.gif in the 
root level of your site folder. Don't move this file to your Images folder; if you do, you'll 
see broken image icons when you view your page in a browser. 

5 Close the Layer palette. 

6 Save your file. 
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Create rollover images 

A rollover image is an image whose display changes when the pointer is “rolled” 
over it. You create a rollover image by attaching a behavior to an image. 

A behavior is a combination of an event and an action. Events are situations that 
trigger actions. For example, an event called onClick can occur when the user clicks 
a button, or an event called onMouseOver can occur when the mouse pointer passes 
(“rolls”) over an object. Actions are pieces of prewritten JavaScript code that 
perform specific tasks, such as opening a browser window, playing a sound, or 
stopping a Shockwave movie. 

When attaching a behavior to a page element, you specify both an action and the 
event that triggers it. Dreamweaver offers several predefined actions that you can 
attach to page elements. 

In this part of the tutorial, you’ll apply Swap Image actions to the Our Story, 
Products, and This Week images so that the images are highlighted when 
the mouse passes over them (that is, when the onMouseOver event occurs). 

For example, when the Our Story image appears on the page normally, it 
looks like this: 



our story 



After you’ve defined a behavior that includes the Swap Image action during the 
onMouseOver event, the Our Story image will look like this (the identical image 
with a different background color) when the mouse passes over it: 



our story 



You’ll continue working on the home page file to attach behaviors to the 
navigation images on your page. Then you’ll preview the page in a browser to test 
the behaviors. 

1 In the Document window, click the Our Story image to select it. 

2 Choose Window > Behaviors or press F8 to open the Behavior inspector, which 
lists all behaviors defined for a selected element. 
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3 In the Events For pop-up menu, 3.0 and Later Browsers should already be 
displayed. If it is not, select it. 

4 Add a new action to the list by clicking the plus (+) button and choosing Swap 
Image from the pop-up menu. 

The Swap Image dialog box appears. In the Images list, you’ll see a list of all 
images on the page, with the Our Story image selected. This is the original 
image, which will be replaced with a highlight image when the mouse pointer 
passes over it. 




5 Click Browse to navigate to the Scaal_site/Images folder, select 

btn_ourstory_over.gif, and then click Select (Windows) or Choose (Macintosh) 
to select the image. 

This image replaces the original image during the onMouseOver event. 




6 Accept the default settings for preloading and restoring images. 

The Preload Images option loads the swap image into the browser’s cache as the 
page loads, so that when the user first moves the mouse pointer over the Our 
Story image, there is no noticeable pause before the highlight image appears. 

The Restore Images onMouseOut option automatically assigns the Swap Image 
Restore action to the onMouseOut event for this image. This returns the image 
to its original state when the user moves the mouse pointer away from it. 
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7 Click OK to close the Swap Image dialog box and apply the changes you 
just made. 

The Behavior inspector now includes the events and actions you just defined 
for the image. The onMouseOver event appears with the Swap Image action; 
above it is the onMouseOut event with the Swap Image Restore action. (This 
behavior was defined when you accepted the default options in the Swap Image 
dialog box.) 




8 Repeat steps 4 to 7 to attach Swap Image actions and onMouseOver events to the 
Products and This Week images: 

• Select the Products image. Then in the Swap Image dialog box, set the source 
of the Products swap image to btn_products_over.gif 

• Select the This Week image. Then in the Swap Image dialog box, set the source 
of the This Week swap image to image btn_thisweek_over.gif 

9 Close the Behavior inspector. 

10 Press FI2 to see your document in your default Web browser. 

You do not have to save a document before you preview it. All browser-related 
functions work while you preview a document. 

11 Move the mouse pointer over the Our Story, Products, and This Week images 
to see how they change. 

12 When you finish previewing the file, close the browser window. 

13 Return to Dreamweaver and choose File > Save to save the changes you made 
to the home page. 

Now, you’ll start creating the files your home page will link to. 
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Import a Word HTML document 

The tutorial file for the Our Story page contains a document that was created in 
Microsoft Word and saved as an HTML document. You’ll import this document 
into Dreamweaver, and then clean up any nonstandard HTML code in the 
document using a new Dreamweaver feature called Clean Up Word HTML. 

The Clean Up Word HTML feature provides options for cleaning up or fixing 
HTML tags, defining CSS (Cascading Style Sheets) elements, setting a page 
background color, removing Word-specific markup tags, and converting Word 
font sizes and headings to HTML size attributes. 

1 With the my_scaal_home page still open, choose File > New to open a new file. 

2 Choose File > Import > Import Word HTML to import a Word 
HTML document. 

3 In the Select Word HTML File to Import dialog box, navigate to 
DW3_ourstory_word.html, and then click Select (Windows) or Choose 
(Macintosh) to select the Word HTML file. 

You are prompted to save your document. 
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4 Click OK. 



The Our Story document opens in the background, and the Clean Up Word 
HTML dialog box appears in front of the document. 







For the purpose of this tutorial, you’ll accept the default settings in the Clean 
Up Word HTML dialog box. These options set the background color of the 
document to white, retain much of the current formatting, and clean up the 
HTML coding in the file. 

5 In the Clean Up Word HTML dialog box, all of the options on the Basic tab 
should be selected by default. Make sure they are all selected, and click OK. 

The Clean Up Word HTML log appears, detailing the results of the cleanup. 




6 Click OK. 

You see a blank document. This is the new document you created before you 
imported the Word HTML document. The imported document is behind the 
blank document. 

7 Close the blank document. 

8 Click in the Our Story document to make it the active window. 

9 Choose File > Save As to save the Our Story document; name it my_ourstory. 

Notice that the Our Story document retains the table formatting and font 
attributes of the original Word HTML file. 
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Format text using HTML styles 

Now that you’ve imported the Our Story document, you’ll add formatting 
changes to the text. An easy way to apply formatting to a document is by using 
HTML styles. An HTML style consists of one or more HTML tags; it can include 
colors, fonts, size, and so on. You can create HTML styles to apply to an entire 
paragraph or to apply to selected text. Once you create an HTML style, you can 
apply it to any page in the current site. 

Unlike CSS styles (which are styles that adhere to the Cascading Style Sheets 
specification), HTML style formatting affects only text that you apply it to, or 
text that you create using a selected HTML style. If you change the formatting of 
an HTML style you have created, text that was originally formatted with that style 
is not updated. 

Apply HTML styles 

In this tutorial, you’ll use an HTML style to format text in the Our Story 
document. 

1 Choose Window > HTML Styles. The HTML Style palette appears. 




Notice that the styles in the palette are for the my_tutorial site. There are three 
items in the palette: 

• The first two items are Dreamweaver commands. Clear Selection Style and 
Clear Paragraph Style. Use these commands to clear existing styles from text 
you’ve selected in your document. 

• The other item is an HTML paragraph style named body, created for you to use 
in this tutorial. 

2 Make sure the Apply option is selected in the lower left corner of the HTML 
Style palette. 

3 In the my_ourstory document, place the insertion point in the first paragraph. 
You can place the insertion point anywhere within a paragraph to apply a style 
to a paragraph. 

4 In the HTML Style palette, click the body style. 

The text in the first paragraph is reformatted in the new style. 

5 Apply the body style to other paragraphs in the document. 



44 Chapter 1 



Create HTML styles 

Next, you’ll create an HTML style to add emphasis to the word Scaal in 
the document. 

1 Click the New Style icon at the bottom of the HTML Style palette. 




■ New Style icon 



The Define HTML Style dialog box appears. 




2 In the Name field, type scaal. 

3 For Apply To, select Selection. 

This applies the style to a selected range of text rather than a whole paragraph. 

4 For When Applying, leave the default setting. Clear Existing Style, which clears 
any styles applied to the selected text when you apply the new style. 

5 For Font Attributes, select the desired attributes. Here are some suggestions: 

• Font: Arial, Helvetica, sans-serif 

• Size: 3 

• Color: #CC9933 (or use the color picker to select a gold color) 

• Style: click Other, and then select Emphasis 
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6 Click OK. 

The new style is added to the HTML Style palette. Notice the a that precedes 
the Scaal style: this icon identifies a style as a selection style rather than a 
paragraph style. 
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When applying a style to a selection, you must select the range of text that you 
want to reformat. 

7 In the Document window, select the word Scaal in the first paragraph. 

8 Select the scaal style in the HTML Style palette. 

The text displays the new style in the document. 

SOAAL 

9 Apply the scaal style to a few more selections, and then close the HTML 
Style palette. 

10 Choose File > Save to save the changes you made to the my_ourstory 
document. 

11 Choose File > Close to close the document. 
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Create a visual map of your site 

Use the Dreamweaver Site Map option to provide a high-level visual 
representation of the structure of a local site. You can also use the Site Map view to 
add new files to the site; to add, remove, and change links; and to create a graphic 
file of the site that you can export to and print from an image editing application. 

In the Site Map window, the home page for a site always appears at the top of a 
site map; below the home page you can see which files the home page links to. 

You’ll set DW3_scaal_home.html as the home page for the my_tutorial site. 

This page is similar to the home page you created. (It’s essentially the same as 
the my_scaal_home document, but images and text formatting have already 
been added.) 

There are a number of ways to define a site home page. The easiest way to set a 
home page is by using the context menu. 

1 Click the title bar of the Site window if visible, to make it active, or choose 
Window > Site Files. 

2 In the Site window, in the Local Folder list, locate the DW3_scaal_home.html 
file. Right-click (Windows) or Control-click (Macintosh) the icon for the 
DW3_scaal_home.html file. 

3 From the context menu, choose Set as Home Page. 

4 Click the Site Map icon in the top left area of the Site window. 
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The Site window now appears with two views of your local site: on the left is a site 
map, which graphically represents the current structure of the Scaal site (with 
DW3_scaal_home.html as the home page), and on the right is a list of the local 
folder’s contents. 
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The DW3_scaal_home page currently has no links. You’ll add links to this page in 
the next section of this tutorial. 

Leave the Site window open for now, so you can see how the site map updates as 
you add links to the home page. 



Create links 

Images on the left side of the Scaal home page guide visitors to specific pages in 
the Scaal site. You’ll add links from the Our Story, Products, and This Week 
images to their corresponding pages. 

You’ll see that there are a number of ways to create links using Dreamweaver. First, 
you’ll add a link from the Our Story image to the Our Story page using the 
Property inspector. 

1 In the Site window, double-click the icon for the DW3_scaal_home.html file 
in either panel. 

The DW3_scaal_home.html file opens. 

2 In the Document window, click the Our Story image to select it. 

Don’t double-click the image, or Dreamweaver will open the Select Image 
Source dialog box. 
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3 Choose Window > Properties to open the Property inspector if it isn’t 
already open. 

The Image Property inspector displays information about the selected image. 




Note: The Link field contains a number sign (#), created when you attached the Swap 
Image behavior to the image. Don't remove the number sign; it will be replaced with the 
file name of the document you link to. 



4 In the Property inspector, click the folder icon to the right of the Link field. 

5 In the Select File dialog box, browse to my_ourstory.html, and click Select 
(Windows) or Choose (Macintosh) to select the file. 

The file name appears in the Link field of the Property inspector. Now 
you’ll add a link to the Products image using the Property inspector and the 
Site window. 

6 Click the title bar of the Site window to make it active, or choose Window > 
Site Files. Resize your Document window, if necessary, so that you can position 
the left side of the Document window and the Site window side by side. 
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7 In the Document window, click the Products image to select it. 
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8 In the Property inspector, drag the Point-to-File icon (located next to the Link 
field) to the Site window, and point to the file DW3_products_index.html. 

The file name appears in the Link field in the Property inspector for the 
products image. 




Click the Site Map icon in the Site window. The site map updates to reflect the 
link you added. 




□V3_home.hlm 



i I 

B "B 

mjLOUistorj.hcm DV3_pioducts.html 



A plus (+) sign next to any file in the site map indicates that the file contains 
links to other documents. Click the plus sign to expand the site map tree 
to display the associated files; click the minus (-) sign to collapse the site 
map view. 

Next, you’ll change a link using the context menu. 

9 In the Document window, right-click (Windows) or Control-click (Macintosh) 
the This Week image and choose Change Link. 

This image is linked to a behavior that swaps the image displayed when a users 
moves the pointer over the image. You’ll change the link so that a file opens 
when a user clicks the image. 
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10 In the Select File dialog box, browse to DW3_thisweek.html and click Select 
(Windows) or Choose (Macintosh) to select the file to open. 

Notice that the Property inspector’s Link field updates to show the linked file’s 
name. Now you’ll create a link from text. 

11 In the Dreamweaver document, select the word products in the second 
paragraph. 

12 Right-click (Windows) or Control-click (Macintosh) and choose Make Link 
from the context menu. 

13 In the Select File dialog box, browse to DW3_products_index.html and click 
Select (Windows) or Choose (Macintosh) to select the file. 

14 Choose File > Save to save all the changes you’ve made to the home page. 

15 Choose File > Close to close the page. 

Create a template 

You can use templates to create documents that have a common structure and 
appearance. Templates are useful when you want to make sure that all of the pages 
in a site share certain characteristics. 

Once you apply a single template to a group of pages, you can edit information on 
the group of pages by editing the template and then reapplying it to those pages. 
While elements unique to each page (such as text describing an item for sale) 
remain unchanged, common template elements (such as navigation bars) are 
updated on all of the pages that use the template. 

The Scaal products page links to several product pages that describe products 
Scaal offers for sale. You’ll use an existing product page to create a template. 

Using a template ensures that your product pages will have an identical layout 
and format. 

In this section, you’ll create a template from an existing product page and then use 
the template to create new product pages. 
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View a product page 

Begin by viewing the Scaal compact disc product page in a browser. 

1 In the Site window, in the Local Folder list, locate the icon for the 
product_cd.html file, and then double-click the icon to open the file in 
Dreamweaver. 

2 Press F12 to preview the page in a browser window. 



our story 
products 
this week 



3 Close the browser when you finish viewing the page. 

4 Close the products_cd.html file. 



SCAAL 



brave new world coffee 




Scaal Sound 

Our very own coffee house collection, featuring 
poetry slams, soulful vocals and a generous 
helping of the blues. 

price: $ 12.95 
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Create the template 

You’ll create a template from the tutorial version of the Scaal compact disk 
product page. You’ll then use this template to create additional product pages. 

1 In the Site window, in the Local Folder list, double-click the icon for 
DW3_products_cd.html to open the file. 

2 Choose File > Save as Template. 

The Save As Template dialog box appears. 




The existing template, product_page, was created for and applied to the 
completed Scaal site product pages. You’ll create your own version of 
this template. 

3 In the Save As field, change the template name: type my_product_page, and 
then click Save. 

A new document appears in the Document window. Notice the Template 
identifier as well as the file extension .dwt. 



< < T emplate> > [mv_prDduct_page. dwt J - D reamwea ver 
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Modify the template 

At this point, your new template is the same as the page from which you saved the 
template. The layout for certain page areas need to be the same on each product 
page: the product photo, product name, product description, and product price. 
You’ll see how to define these areas in your template. 

Each template contains both locked and editable regions. Locked regions can be 
edited only inside the template itself; they appear in a highlight color on all pages 
the template is applied to. Editable regions are placeholders for the content that is 
unique to each page the template is applied to. In an applied template, the 
editable regions are highlighted. 

1 In the my_product_page.dwt template in the Document window, select and 
delete the compact disc image; then type Insert image here in the table cell. 

2 Select the text you just typed. 







3 Choose Modify > Templates > New Editable Region. 

The New Editable Region dialog box appears. 

4 In the Name field, type Image as the name for this region of the template. 
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5 Click OK. 



Notice the text is now highlighted, indicating this is an editable region of 
the template. 

6 In the Document window, select “Scaal Sound,” then choose Modify > 
Templates > New Editable Region to make this an editable region in 
the template. 

7 In the Name field in the New Editable Region dialog box, type Name and click 
OK. 

In the Document window, the region is highlighted and identifiable by the 
region name you gave it. 

8 In the Document window, select the product description text, and then choose 
Modify > Templates > New Editable Region to make this an editable section of 
the template. 

9 In the Name field in the New Editable Region dialog box, type Description 
and click OK. 

In the Document window, the region is highlighted and identifiable by the 
region name you gave it. 

10 Choose File > Save to save your template. 

The Update Pages dialog box appears, asking if you want to update all the 
documents in your local site. Selecting Yes would update the pages in the 
completed Scaal site, which you don’t want to do. 

11 Click No, and then click Close to close the Update Pages dialog box. 

12 Close the template. 
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Apply the template 

Now you’ll use the template to create a new product page. 
1 Choose File > New from Template. 

The Select Template dialog box appears. 




2 In the Templates list, select my_product_page as the template to apply, and 
then click Select. 

A new untitled document appears. 




brave new world coffee 






image tiere 



our story j 



products : 



this week j 



I 



I 



iname 

price: $12.95 



The darker regions of the document are editable; all other regions of the 
document are locked and cannot be edited. 

3 Save your document, and name the file my_products_mug.html. 
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Edit the document 



With the editable regions set, updating pages is easy. You’ll replace the placeholder 

text with an image, and add text to create Scaal’s Commuter Mug product page. 

1 Place the insertion point in the Image region. 

2 Choose Insert > Image, and in the dialog box that appears select mug.jpg. Then 
click Select (Windows) or Choose (Macintosh) to select the image. 

3 Delete the Image placeholder “Insert image here” text. 

4 In the Document window, in the Name region, type a name for the product, 
such as Commuter Mug, and delete the placeholder. 

5 In the Document window, in the Description region, type some descriptive text 
about the mug and delete the placeholder. 

6 Save your document. 

7 Close the document. 

In the next section of the tutorial, you’ll link product page documents to 

Scaal’s main products page. The product pages you’ll link were created using a 

similar template. 
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Create a jump menu 

A jump menu is a pop-up menu of options that link to and open files in a browser 
window. You’ll create a jump menu that allows a customer to quickly jump from 
the products index page to specific product pages in the Scaal site. 

Before you create the jump menu, preview the completed page. 

1 In the Site window, double-click the icon for the products_index.html file 
to open it. 

2 Press F12 to preview the page in the browser. 



SCAAL 



brave new world coFFee 



products 



c ojje e search 



products 



coffee search 
coffee blends 
coffee foods 
coffee tools 
coffee wear 



There are so many places you 
could go to buy coffee. WeVe 
gone to extraordinary efforts to 
ensure that SCAAL is your best 
choice. The quality begins at 
harvest. SCAAL relies on selective 
picking, a labor-intensive process 
that involves making several 
passes among the trees for those 
cherries that are perfectly ripe. 
Then we select top grade SHB, 
which stands for strictly hard bean 
or strictly high grown. Beans that 
are grown at a minimum altitude of 
4,000 feet above sea level for 
optimum flavor. Within hours of 
shipping our coffee to you, the 
beans are roasted on-site in small 
batches by a Certified 



find it 4 




3 Click the arrow to the right of the Select a Product pop-up menu to display the 
product selection menu. Select a product to view. 

4 When you have finished viewing the files, close the browser window. 

5 Close the products_index file. 
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Insert a jump menu 

The jump menu you create will contain a selection prompt to inform viewers of 
options. You’ll also create two menu commands that link to product pages. 

1 In the Site window, double-click the icon for the DW3_products_index.html 
file to open it. 

2 Select and delete the text “insert jump menu here.” 

3 With the insertion point in the table cell, choose Insert > Form Object > 
Jump Menu. 

The Insert Jump Menu dialog box appears. 




4 In the Text field, type Select a product. 

This text prompts a viewer to take action. 

5 Under Options, select the Select First Item After URL Change option. 

This sets the first entry in a menu as the item to which the menu returns after a 
user selects an option in the jump menu. 

6 Click the plus (+) button to add another jump menu item. 

7 In the Text field, type Compact disc. 

8 In the When Selected, Go To URT field, click Browse and navigate to 
DW3_products_cd.html. Click Select (Windows) or Choose (Macintosh) to 
select the file you want to open when the item is selected. 

9 Click the plus (+) button to add one more jump menu item. 
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10 In the Text field, type Coffee mug. Then click Browse and navigate to 

DW3_products_mug.html. Click Select (Windows) or Choose (Macintosh) to 
select the file you want to open when the item is selected. 

Your Insert Jump Menu dialog box should look similar to the screen below. 




11 Click OK to close the dialog box. 

12 Save your document. 

The jump menu doesn’t work in the Document window; you must preview it 
in a browser to test your links. 



Check your site 

Now that you’ve made all necessary edits to the partially completed files, preview 

the entire site in a browser to see how it looks. 

1 With the DW3_scaal_home page open, press FI2 to open the page in 
a browser. 

2 Click the Our Story, Products, and This Week images to view the other 
pages you edited for the site. Try selecting the jump menu items on the 
Products page. 

3 When you’ve finished looking at the site you built, close the browser window; 
then return to Dreamweaver and choose File > Close to close the home page. 
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